<template>
  <view class="body-notice f f-ac f-jb">
    <view class="body-notice-left f f-ac f-js" @click="handleClick">
      <view
        class="body-notice-title"
        :style="{
          color: labelColor,
        }"
        >{{ label }}</view
      >
      <view
        class="body-notice-content"
        id="notice"
        :style="{
          color: color,
          animationDuration: second + 's',
        }"
      >
        {{ content }}
      </view>
    </view>
    <view>
      <u-icon name="arrow-right" :color="labelColor" />
    </view>
  </view>
</template>

<script>
export default {
  props: {
    // 标题
    label: {
      type: String,
      default: "公示栏",
    },
    // 内容
    content: {
      type: String,
      default: "",
    },
    // 滚动速度 数值越大速度越快
    speed: {
      type: [Number, String],
      default: "5",
    },
    // 标题颜色
    labelColor: {
      type: String,
      default: "#24DE73",
    },
    // 内容颜色
    color: {
      type: String,
      default: "#fff",
    },
  },
  watch: {
    content(v) {
      this.setSecond();
    },
  },
  mounted() {
    this.setSecond();
  },
  data() {
    return {
      second: 5, // 滚动速度
    };
  },
  methods: {
    // 设置滚动速度
    setSecond() {
      uni
        .createSelectorQuery()
        .in(this)
        .select("#notice")
        .boundingClientRect((rect) => {
          this.second = parseInt(rect.width / (this.speed * 5));
        })
        .exec();
    },
    // 点击事件
    handleClick() {
      if (this.content == "") return;
      this.$emit("click");
    },
  },
};
</script>

<style lang="scss" scoped>
.body-notice {
  width: 100%;
  padding: 20rpx 30rpx;
  background-color: #26292b;
  box-sizing: border-box;
  border-radius: 20rpx;
  border: 1rpx solid rgba(145, 205, 68, 0.5);
  &-left {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    .body-notice-title {
      font-family: "FZZongYi-M05S";
      font-size: 28rpx;
      background-color: #26292b;
      z-index: 9 !important;
      &::after {
        content: "|";
        display: inline-block;
        margin-left: 20rpx;
        margin-right: 20rpx;
      }
    }
    .body-notice-content {
      font-size: 26rpx;
      white-space: nowrap;
      animation-timing-function: linear;
      animation-delay: 0s;
      animation-iteration-count: infinite;
      animation-name: rigntToleft;
      z-index: 1 !important;
    }
  }
}
@keyframes rigntToleft {
  0% {
    transform: translateX(70%);
  }
  100% {
    transform: translateX(-100%);
  }
}
</style>
